<template>
  <!--首页每一部分头部标题组件-->
    <el-row type="flex" align="middle" justify="left">
        <el-col :lg="titleWidth" :xl="titleWidth">
            <div class="refresh">
                <h1>{{ titleInfo.title }}</h1>
                <el-button plain size="mini" icon="el-icon-refresh-left" @click="refreshList"
                           v-show="titleInfo.isShowAll && titleInfo.isChange">换一批
                </el-button>
            </div>
        </el-col>
        <el-col :lg="{span:2,offset:16}" :xl="{span:2,offset:16}" class="link-to-total" v-show="titleInfo.isShowAll">
            <div @click="showAll">
                查看全部
                <font-awesome-icon icon="fas fa-chevron-right" class="show-total"/>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import {LINKTOALL, RECSONGLIST, SINGERLIST, SINGERSMVs, TOPLIST, UPDATELIST} from "@/http/constant";

export default {
    name: "PartTitle",
    props: ['titleInfo'],
    methods: {
        refreshList() {
            this.$bus.$emit(UPDATELIST, {
                type: this.titleInfo.type
            })
        },
        // 跳转到显示全部列表的页面
        showAll() {
            const {type} = this.titleInfo
            switch (type) {
                case RECSONGLIST:
                    // 显示发现页的推荐歌单
                    this.$router.push({
                        name: 'find-page',
                        params: {
                            level: 1,
                            name: '推荐歌单'
                        }
                    })
                    break
                case TOPLIST:
                    // 显示发现页面的排行榜
                    this.$router.push({
                        name: 'find-page',
                        params: {
                            level: 3,
                            name: '排行榜'
                        }
                    })
                    break
                case SINGERLIST:
                    // 显示歌手页面
                    this.$router.push({
                        name: 'total-singers'
                    })
                    break
                case SINGERSMVs:
                    const {otherInfo: {singerId, singerName}} = this.titleInfo
                    this.$router.push({
                        name: 'total-mvs',
                        params: {
                            singerId,
                            singerName
                        }
                    })
                    break
            }
        },

    },
    computed: {
        titleWidth() {
            return this.titleInfo.isShowAll ? 6 : 24
        }
    }
}
</script>

<style scoped lang="less">
.refresh {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .el-button {
    margin-left: 1vw;
    margin-top: .5vh;
  }
}

.link-to-total {
  text-align: right;
  font-weight: 700;

  .show-total {
    margin-left: .3rem;
    margin-right: .3rem;
    color: #aba8a8;
  }

  > div {
    color: #aba8a8;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
}
</style>